<template>
  <div class="showDialogBox">
    <van-dialog v-model:show="showFaBuDialog" title="发布新文章" show-cancel-button confirm-button-text="发布"
      @cancel="closeShowFaBuDialog" @confirm="addArticle()">
      <h1>请选择你的需求</h1>
      <p>
        <van-radio-group v-model="sysArticle.articleType" direction="horizontal">
          <van-radio name="1">仅阅读</van-radio>
          <van-radio name="2">点再看</van-radio>
        </van-radio-group>
      </p>
      <h1>文章标题</h1>
      <p><van-field v-model="sysArticle.title" placeholder="建议:   标题+需求" /></p>
      <h1>文章链接</h1>
      <p><van-field v-model="sysArticle.link" placeholder="请输入文章链接" /></p>
      <p class="red">阅豆小于0后文章将不展示。如需{无敌置顶}或顶文章，请移步至我的文章</p>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps, } from "vue";
import { addArticleApi } from "../api/index.js";
let showFaBuDialog = ref(true)
let sysArticle = ref({
  title: "",
  articleType: "1",
  link: "",
})

function closeShowFaBuDialog() {
  emit("changeIsPublishArticles")
}
// const props = defineProps({
//   isPublishArticlesSon: {
//     type: Boolean,
//     default: true,
//   },
// })
const emit = defineEmits(["changeIsPublishArticles"])
onMounted(() => {

  // 在组件挂载后执行的逻辑，例如初始化数据、订阅事件等
})
function addArticle() {
  let obj = {
    title: sysArticle.value.title,
    articleType: sysArticle.value.articleType,
    link: sysArticle.value.link,
    beReadCount: "",
    createTime: "",
    id: "",
    rank: "",
    userId: "",
  }
  addArticleApi(obj).then((res) => {
    // console.log("发布文章", res);
    closeShowFaBuDialog()
  });
}
</script>

<style lang="less" scoped>
.showDialogBox {
  padding: 30px;
  box-sizing: border-box;

  h1 {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 20px;
    color: #000000;
    text-align: center;
    font-style: normal;
    text-transform: none;
    padding: 20px 0;
    box-sizing: border-box;
  }

  p {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #8D8D8D;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }

  .red {
    color: red;
    padding: 20px 0;
  }


}

/deep/ .van-dialog {
  padding: 0 20px !important;
  box-sizing: border-box;
}
</style>
